<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="50%"
      @close="closeEvent"
    >
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="form.name" class="bid_size" />
        </el-form-item>

        <el-form-item label="权限标识" prop="code">
          <el-input v-model="form.code" class="bid_size" />
        </el-form-item>

        <el-form-item label="权限描述" prop="description">
          <el-input v-model="form.description" class="bid_size" />
        </el-form-item>

        <el-form-item label="开启" prop="enVisible">
          <el-switch v-model="form.enVisible" active-value="1" inactive-value="0" />
        </el-form-item>
      </el-form>
      <!-- 确定按钮和 取消按钮 -->
      <div class="butt_men">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sysPermissionPut, sysPermissionPuts } from '@/api/permission'
export default {
  data() {
    return {
      isShow: false,
      mode: 'add',
      rules: {
        name: [{ required: true, message: '必填', trigger: 'change' }],
        code: [{ required: true, message: '必填', trigger: 'change' }]
      },
      form: {
        name: '', // ": "员工
        code: '', // ": "employe
        description: '', // ": "用户管理
        enVisible: '', // ":
        type: '', // "  页面是 1  按钮是2
        pid: '' // "
      }
    }
  },
  /* 再写个计算属性 当里面的值发送变化的时候 调用下面的方法 */
  computed: {
    title() {
      return {
        add: '新增权限点',
        edit: `编辑【${this.form.name}】`
      }[this.mode]
    }
  },
  methods: {
    async submit() {
      /* 先判断是否通过表单验证 */
      await this.$refs.form.validate()
      if (this.mode === 'add') {
        /* 更改标题 */
        await sysPermissionPut(this.form)
        /* 提示成功 */
        this.$message.success('新增成功')
      } else if (this.mode === 'edit') {
        /* 执行编辑按钮 */
        await sysPermissionPuts(this.form)
        this.$message.success('编辑成功')
      }
      /* 刷新页面 */
      this.$emit('getData')
      /* 关闭 对话框 */
      this.isShow = false
      /* 下一步就是解决当再次打开 添加框的时候 要让里面的数据不显示 也就是清楚数据 */
    },
    /* 下面这个是当对话框关闭时触发的方法 */
    closeEvent() {
      this.$refs.form.resetFields() // 但是这种form自带的清空 他只是把form里面的值初始化
      /* 上面的 不能完全清空 */
      this.form = {
        name: '', // ": "员工
        code: '', // ": "employe
        description: '', // ": "用户管理
        enVisible: '', // ":
        type: '', // "  页面是 1  按钮是2
        pid: '' // "
      }
    }
  }

}
</script>

<style scoped lang="scss">
   .bid_size{
    width: 60%;
   }
   .butt_men{
    text-align: right;
   }
</style>
